<!--
* Copyright 2010-2012 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div style="background-color: #252525;color:white;" data-bb-type="screen" data-bb-effect="slide-left">
	<div data-bb-type="title" data-bb-caption="CheckBox Interface" data-bb-back-caption="Back" ></div>
	<script src="js/dynamicCheckBoxes.js"></script>
	
	<div data-bb-type="round-panel" style="background-color: #252525;color:white;"> 
		<div data-bb-type="panel-header">Create/Remove CheckBoxes</div>
		<div id="addRemove" data-bb-type="button" data-bb-style="stretch" onclick="addRemoveCheckBox()">Add CheckBox</div>
		<div id="checkboxContainer">
		</div>
	</div>
	
	<div data-bb-type="round-panel" style="background-color: #252525;color:white;"> 
		<div data-bb-type="panel-header">Manipulate CheckBox States </div>
		<table>
			<tr>
				<td class="cell" style="padding-top:7px;">My CheckBox</td>
				<td class="cell" ><input id="checkOne" type="checkbox" checked="true" value="one"/></td>
			</tr>
		</table>
		<div data-bb-type="button" data-bb-style="stretch" onclick="enableCheckbox()">Enable Checkbox</div>
        <div data-bb-type="button" data-bb-style="stretch" onclick="disableCheckbox()">Disable Checkbox</div>
		<div data-bb-type="button" data-bb-style="stretch" onclick="checkCheckbox(true)">"Check" Checkbox</div>
		<div data-bb-type="button" data-bb-style="stretch" onclick="checkCheckbox(false)">"Uncheck" Checkbox</div>
		<div data-bb-type="button" data-bb-style="stretch" onclick="hideCheckbox()">Hide Checkbox</div>
        <div data-bb-type="button" data-bb-style="stretch" onclick="showCheckbox()">Show Checkbox</div>
	</div>

	<div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
